import { Page, DropDownBtn } from '../../components/components.js';
import { LANG } from '../../config/config.js';

const Link = ReactRouter.Link;

class home extends React.Component {
  render() {
    return (
      <Page className="home">
        <header className="home-header">
          <ul className="nav-menu-level home-header-nav">
            <li>
              <DropDownBtn>
                <span>123</span>
                <i className="glyphicon glyphicon-triangle-bottom"></i>
                <ul className="nav-menu-vertical">
                  <li><Link to="/">{LANG[Lang].quite}</Link></li>
                </ul>
              </DropDownBtn>
            </li>
          </ul>
        </header>
        <nav className="home-aside">
          <div className="home-aside-title"><span>{LANG[Lang].homeTitle}</span></div>
          <ul className="nav-menu-vertical home-aside-nav">
            <li><Link activeClassName="active" to={`orderManagement`}>
              <i className="glyphicon glyphicon-list-alt"></i>
              <p>{LANG[Lang].orderManagement}</p>
            </Link></li>
            <li><Link activeClassName="active" to={`personnelManagement`}>
              <i className="glyphicon glyphicon-user"></i>
              <p>{LANG[Lang].personnelManagement}</p>
            </Link></li>
            <li><Link activeClassName="active" to={`orderAllocation`}>
              <i className="glyphicon glyphicon glyphicon-cog"></i>
              <p>{LANG[Lang].orderAllocation}</p>
            </Link></li>
            <li><Link activeClassName="active" to={`productManagement`}>
              <i className="glyphicon glyphicon-th-large"></i>
              <p>{LANG[Lang].productManagement}</p>
            </Link></li>
          </ul>
        </nav>
        <div className="home-body">
          {this.props.children}
        </div>
      </Page>
    )
  }
}
module.exports = home;
